<template>
    <div class="container">
        <div class="container_head">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-button type="primary" icon="el-icon-plus"  round  @click="dialogFlag=true">添加课程</el-button>
                </el-col>
                <el-col :span="18">
                    <el-input placeholder="请输入搜索内容" v-model="courceName" suffix-icon="el-icon-search"
                              @keyup.enter.native="search" class="sousuo">
                        <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
                    </el-input>
                </el-col>
            </el-row>
        </div>
        <div class="container_body" v-for="(course,index) in courseList" :key="index">
            <el-row>
                <el-col :span="8">
                    <div>
                        <img src="img/4.jpg" style="height: 170px;">
                    </div>
                </el-col>
                <el-col :span="8">
                    <div style="margin-top: 50px">
                        <h3>{{ course.courceName }}</h3>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div style="margin-top: 50px">
                        <el-button type="success" icon="el-icon-view"  @click="getCourseInfo(course)" round>查看</el-button>
                        <el-button type="danger" icon="el-icon-delete"  @click="" round>删除</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>

        <el-dialog :visible.sync="dialogFlag" @close="dialogFlag = false">
            <el-upload
                    class="upload-excel"
                    ref="upload"
                    :accept="'.xls,.xlsx'"
                    :ref="upload"
                    action="http://localhost:8080/courseMaster/upload"
                    :limit="1"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="uploadExcel">确定上传</el-button>
                <a href="https://nodark.oss-cn-beijing.aliyuncs.com/JiGuang/images2023/05/08/8f2db9923e1d4cfc8ce20de7ef927539%E8%AF%BE%E7%A8%8B%E8%A1%A8.xlsx">点击下载模板</a>
                <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过10M</div>
            </el-upload>
        </el-dialog>

        <el-dialog :visible.sync="dialogTreeFlag" @close="dialogTreeFlag = false">
            <el-tree :data="courseDirList" :props="defaultProps" default-expand-all>

            </el-tree>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: "CourseList",
        data() {
            return {
                courceName: '',
                //班级数组
                courseList: [],
                //课程目录
                courseDirList: [],
                user: JSON.parse(window.localStorage.getItem('user')),
                dialogFlag: false,
                dialogTreeFlag: false,
                defaultProps: {
                    children: 'children',
                    label: 'dirName',
                },
            }
        },
        methods: {
            uploadExcel() {
                var _this = this;
                _this.$refs.upload.submit();
            },
            handleSuccess(response, file, fileList) {
                // 处理上传成功的逻辑
                console.log("上传成功")
            },
            handleError(error, file, fileList) {
                // 处理上传失败的逻辑
                console.log("上传失败")
            },
            search() {
                var _this = this;
                axios.get('http://localhost:8080/courseMaster/findCourseByLike?courceName='+_this.courceName).then(function (res){
                    _this.courseList = res.data.data;
                    console.log('模糊查询课程');
                    console.log(_this.courseList);
                })
            },
            //获取课程信息
            getCourseInfo(course){
                var _this = this;
                console.log(_this.course);
                axios.get("http://localhost:8080/courseDirectory/findCourseTreeByCourceId?courceId=" + course.courceId).then(function (res) {
                    _this.courseDirList = res.data.data;
                    console.log("课程目录");
                    console.log(_this.courseDirList);
                });
                _this.dialogTreeFlag=true;
            }
        },
        created() {
            const _this=this;
            //获取所有的课程
            axios.get("http://localhost:8080/courseMaster/findAllCourse").then(function (res) {
                _this. courseList = res.data.data;
                console.log("所有课程");
                console.log(_this. courseList);
            })
        }
    }
</script>

<style scoped>
    .container_head {

    }

    .container_body {
        /*box-shadow: 0 10px 60px 0 rgb(69, 176, 255);*/
        /*text-align: center;*/
        height: 170px;
        width: 73%;
        margin-left: 160px;
        background-color: white;
        padding: 20px;
        shadow: hover;
        margin-bottom: 20px;
        margin-top: 10px;
        color: black;
    }

    .container_body:hover {
        box-shadow: 0 2px 30px rgb(69, 176, 255);
    }

    .sousuo {
        width: 250px;
        margin-left: 500px;
        margin-top: 12px
    }
</style>